


How to make the probe text have colors

by Threadzless



Category: 17776: What Football Will Look Like in the Future - Jon Bois
Genre: (American), FOOTBALL!, If you don't know that 17776 is this probably isnt for you, space probes with emotions
Language: English
Status: In-Progress
Published: 2017-07-16
Updated: 2017-07-21
Packaged: 2018-12-02 16:56:34
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 4
Words: 2,587
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/11513556
Author URL: https://archiveofourown.org/users/Threadzless/pseuds/Threadzless
Summary: If your writing a story about 3 space probes your a weirdo.A weirdo i probably like very much, and I want you to have the best tools to do your stuff.So, I figured out how to make the probe text have color and I'm making it easy for you to do.Enjoy!





	1. How to use this in your writings

**Summary for the Chapter:**

> The probes are gonna explain you how to use colors.

does it fuckign work yet

Looks like it.

Pheww. Code is hard.

your made of code

your moms made of code!

.

yes...

.

.

.anyway... Hello humans apparently you want to write stories about us.

prolly fucking

oh...

You can ignore him. Here's how to make our text look correct.

Before you write your fic, go to the chapter 3 (or the most recent one named "Skin Source Code") for instructions on how to create a Work Skin. You need this for the colors to show properly.

Afterwards, When writing your fic there will be a drop down box labeled _Select work skin_.  
You need to set this to "17776 Chat Log" or whatever you named your Work Skin otherwise none of this will work.

You can't select "Rich Text Mode" and this work, so make sure "HTML" is selected.  
If you don't know what this is don't worry about it.

When writing, anytime you want to have us say something, start our text like this: _< p class="NAME">_  
Just remember to replace _NAME_ with the name of who you want to talk in all lower case.  
Then end our text like this _< /p>_.  
Remember, every _< p class="NAME">_ must have a _< /p>_ before the next line of text.

or some weird shit might happen

Currently nine, ten, juice and hubble are supported, as well as nancy, thuy and roger.

also person1, person2, and person3 for your ocs cuz why not

You can add <br/> to drop down to the next line without changing character or using a tonne of space.  
Like this.  
Its useful for tone I guess.

u should click preview not post just to mkae shure it worked right

You can also make text **Bold** , _Italic_ , or underlined by using _< b>...</b>_, _< i>...</i>_, and _< u>...</u>_, respectively.

Don't forget to use the closing tags in the reverse order you opened them.  
By that I mean if you use <p name="..."> and then <i> you have to use </i> before you use </p> to end the line.  
If you don't, the webpage might throw a hissy fit. Or it might look correct. HTML is finicky.

**SO** _MUCH_ POWER

Are you going to talk like that forever now?

**p** r **o** _l **y**_

Well, that just about covers it. Happy writing.

see _ya_

Bye we love you <3

**Notes for the Chapter:**

> When i previewed this chapter last, I forgot to close one of the tags right before the line explaining that you need to close your tags.  
> It resulted in the second half of this chapter being all underlined.  
> So much for me knowing what I'm doing.


	2. Skin Source Code

**Summary for the Chapter:**

> Heres V1 of the work skin source.  
> Also, I added a bunch of characters hubble, nancy, thuy and roger (the bros from Trash Football), and 3 random people named person1, person2, and person3. Useful for OCs.

**Notes for the Chapter:**

> HOWTO:  
> Copy this chapter  
> Go to your dashboard.  
> Click "Skins"  
> Click "My Work Skins"  
> Click "Create Work Skin"  
> Set the title to "17776 Chat Log"  
> Paste the thing you copied in the box labeled CSS

#workskin {  
background: #111111;  
}

#workskin .nine {  
color: #ff6767;  
padding-left: 10%;  
}

#workskin .ten {  
color: #92ff92;  
padding-left: 0;  
}

#workskin .juice {  
color: #ffea02;  
padding-left: 20%;  
}

#workskin .nancy {  
color: #ffcc00;  
padding-left: 10%;  
}

#workskin .radio {  
color: #ffffff;  
padding-left: 50%;  
}

#workskin .person1 {  
color: #fdb9b9;  
padding-left: 25%;  
}

#workskin .person2 {  
color: #c93eff;  
padding-left: 25%;  
}

#workskin .person3 {  
color: #e84d00;  
padding-left: 25%;  
}

#workskin .thuy {  
color: #ffb975;  
padding-left: 10%;  
}

#workskin .roger {  
color: #ffa4fa;  
padding-left: 15%;  
}

#workskin .hubble {  
color: #04eaec;  
padding-left: 15%;  
}

#workskin p {  
color: #ffffff;  
}


	3. Skin Source Code V2

**Summary for the Chapter:**

> You know how in the original work there was sometimes a screenshot of a text file or something.  
> Here's a simple work around to make that work, and also non-probe text is white instead of the default skin color now.  
> You will have to use a <br/> to start a new line in the terminal or something weird will happen.

**Notes for the Chapter:**

> HOW TO:  
> Copy the part of this chapter after the example  
> Goto you dashboard  
> Click "Skins"  
> Click "My Work Skins"  
> If theres already one there, click "Edit" otherwise click "Create Work Skin".  
> Set the title to "17776 Chat Log V2" or something.  
> Paste this chapter in the box labeled "CSS"  
> Save.

COMMUNICATIONS LOG  
PIONEER 9  
PIONEER 10  
JUPITER ICY MOONS EXPLORER  
PAGE 83716391942 OF 83716391942  
=======  
  
  
NINE: woah whats this?  
TEN: This is a new feature! Now the humans can create CSS effects that look like text files from ye old computers.  
JUICE: why would anyone ever need that  
TEN: - Remembering old conversations.  
TEN: - Taking notes  
TEN: - Presumably other stuff as well.  
NINE: - Keeping track of questions you need to ask.  
TEN: Yes. Thank you Nine.  
JUICE: still seems dumb but whateves  


/* v v v - - - star copying from here down - - - v v v */

#workskin {  
background: #111111;  
}

#workskin .nine {  
color: #ff6767;  
padding-left: 10%;  
}

#workskin .ten {  
color: #92ff92;  
padding-left: 0;  
}

#workskin .juice {  
color: #ffea02;  
padding-left: 20%;  
}

#workskin .nancy {  
color: #ffcc00;  
padding-left: 10%;  
}

#workskin .radio {  
color: #ffffff;  
padding-left: 50%;  
}

#workskin .person1 {  
color: #fdb9b9;  
padding-left: 25%;  
}

#workskin .person2 {  
color: #c93eff;  
padding-left: 25%;  
}

#workskin .person3 {  
color: #e84d00;  
padding-left: 25%;  
}

#workskin .thuy {  
color: #ffb975;  
padding-left: 10%;  
}

#workskin .roger {  
color: #ffa4fa;  
padding-left: 15%;  
}

#workskin .hubble {  
color: #04eaec;  
padding-left: 15%;  
}

#workskin .terminal {  
border: 2px solid #eee;  
background: #000;  
padding: 10px;  
font-family: monospace;  
font-size: 1.2em;  
font-weight: bold;  
-ms-transform: matrix(1, -0.03, 0, 1, 0, 0);  
-webkit-transform: matrix(1, -0.03, 0, 1, 0, 0);  
transform: matrix(1, -0.03, 0, 1, 0, 0);  
width: 500px;  
height: 500px;  
margin: 10px;  
}

#workskin .terminal p {  
padding: 0px;  
margin: 0px;  
}


	4. Pioneer 10's Guide to Visually Stimulating Writing

**Summary for the Chapter:**

> If you want to add more character text colors to your script here's how.

**Notes for the Chapter:**

> Ten can be a bit long winded, so to speak, so skip the part where JUICE talks a lot for a short version.

Well if I do it by myself I will inevitably leave something out and I don't want full responsibility for that.

fiiiiiiine ill help but for the record this is pointless they already made a guide and google exists

Noted. Alright, here we go

.

.

Hello and welcome to _Pioneer 10's Guide to Visually Stimulating Writing_ , with your host, Pioneer 10!

also me

should i be here?

In this instructional guide, I will be covering the basic concepts for Cascading Style Sheets (CSS) and HyperText Markup Language (HTML) scripting languages. Archive of Our Own allows authors to implement both in their writings, so with this knowledge you will be able to expand your abilities to be expressive in your writings by changing fonts, adjusting opacity and text size, utilizing tessellating style shifts, introducing dynami-

.stop

Why are you interrupting me?

.just stop  
.no one talks like that and no one want to be talked to like that

He's right, I'm made of assembly code but this is too much.

peeps just wanna know how to make the colors go not learn a few scripting languages theyll never use

.

I suppose that's fair.

First a brief history of HTML.

ten no

TEN YES. When the internet was first created webpages were black text on a white background with text that was always the same size, font, and always aligned right. There was no formatting, no links between pages, no images, no anything visually interesting.

Sounds... unusable.

Remember this was the 1980s, everything about computers sucked up to that point. While this did technically work, everyone hated it so much that some smart people invented HyperText Markup Language (HTML) which basically meant you could include images, create

## Titles! Horizontal Rules v

* * *

  * Lists
  * **BOLD** , _Italic_ , and underlined
  * And more 



All by putting bits of text between tags. <center>Some text</center> would put "Some text" centered on the page

It was all but universally agreed that this was far better. More features were added with time, but the language's syntax has never been changed significantly, and is still in use today on almost every web enabled device.

While HTML was useful, it had its limits. For example, if you wanted to make text do something different, you had to invent a new tag and get every web browser to adopt it into their code. Clearly, that was ridiculous for most people. So, in 1897, CSS was born. CSS is an elegant way to take control over exactly what each tag does. It works like this:

you can skip to here from teh top and not miss anything important

A CSS file is made of one or more _Statements_. Each _Statement_ begins with a _Selector_ , which describes which HTML tags to modify. Then, one or more _Declarations_ follow, which describe what to do to the contents of the tags specified in the Selector. Here's an example _Statement_ :

p {  
   color: red;  
}

Let's break that down

y

The first line is the _Selector_. It says  p, meaning it selects all <p> ... </p> tags. The open bracket after it is required between the _Selector_ and the _Declaration_.

The second line is the first and only _Declaration_ in this example. _Declarations_ are made up of two parts, the _Attribute_ and the _Value_ , and the split is right where the colon is. On this line, the _Attribute_ is "color", which means color of text, and the value is "red". Each _Declaration_ must be ended by a semicolon.

The third and final line is a closing bracket, which completes the _Statement_.

it means words between <p> and </p> is red

.Yes. Excellent summary JUICE. Thank You So Much For Your Help.

welc

This is useful, but if you don't want to edit all <p> tags at once, you can get more specific. Consider this CSS:

p.foo {  
  color: #3377FF;  
}

And this HTML:

<p>Words</p>  
<p class="foo">More Words</p>  
<p class="foo bar">Even More Words</p>  


html = chapter text on ao3

The CSS Definition p.foo means it it will affect <p> tags with the class named "foo". In this example, that means that line 2 and 3 of the HTML will be affected, which will change the color of "More Words" and "Even More Words", but not "Words".

You may have noticed that the span tag around "Even More Words" has two classes separated by a space. This is entirely allowed, and if there is another rule that says p.bar, that rule will apply to "Even More Words" as well. Yes, multiple CSS _Statements_ can apply to a tag at once.

Just make sure the classes are separated by a space.

Additionally, the _Statement_ p { ... } applies to all 3 lines, although it doesn't do anything because ... isn't a valid _Declatation_.

But what about that color: #3377FF; bit? Well, you can't give a name to _every_ color ever, so hexidecimal color codes exist. If you want to find the color code of a specific color, you can type "color picker" into google and it will give you an easy to use tool.

you can use photoshops or whatever color picker thingy to get a color code 2

Now, onto the fun part. So far we've only been changing the text color, but CSS can do so much more. Take this example:

p.foo {  
  color: green;  
  border: solid 2px orange;  
  padding: 5px;  
  text-decoration: underline;  
  background: #222222;  
}

Now we have several _Declarations_ , each one ending with a semicolon.  
The first one makes the text color green.  
The second puts a border around the contents of the <p> tag, that is 2 pixels wide, and orange.

Pixels are those little squares you can see when you look really close at a screen.

The third requires that there be 5 pixels of space between the stuff inside the tag, and the border.  
The fourth makes all the text underlined.  
And finally the fifth fills the background with a dark grey color.

Also, please don't use these colors together. It looks bad

EVIL!

now animations

AO3 doesn't allow animation definitions. Also, they are very complex, terrible, usually ugly, and not supported in some browsers.

booooooo

There are many more features to CSS, like being able to select a tag only by its class (.foo { ... }), or requiring that a second tag must be an immediate child to the previous tag, rather that just anywhere inside of it (p>span) or the hundreds of other things that can be changed using CSS, but for now that is enough about CSS. Now we need to talk about AO3's work skins.

you didnt do the thing with hover and transitions

Those topics are beyond the scope of this guide.

what about pseudo classes

Oh right! There are some cases where you may want to put a snippet of text before or after every tag that matches a selector. For example, if you want to put peoples names in front of every line where they speak. This can be achieved by using the :before suffix on the _Selectror_ :

p.ten:before {  
  contents: "Ten: ";  
}

This _Statement_ puts the text "Ten :" at the beginning of any  <p> tag that has the "ten" class. :after is used in the same way, and both may be used simultaneously.

this is way too long no 1s gonna read it

it is a bit much..

Well, if people aren't willing to learn the bare minimums of CSS then they just wont learn about it.

ya but you put in a bunch of stuff you didnt have to

I did not. Everything I covered was relevant to web design.

but this is for ao3

You did explain this a few days ago. Although I dont remember several of the thing my log says we said.

thats prolly the dumb writer not bothring to proofread and leaving out relevant info by accident

Well, if you want to explain it more succinctly be my guest.

k

.

wasup yall heres how to add more people to your work skin  
look at this mess of stuff

#workskin .NAME {  
  color: COLOR;  
  padding-left: MOVE;  
}

take this replace NAME with the persons name no spaces but underscores_are_allowed.  
replace COLOR with a color code you can pick one by googling "color picker" and then use the thingy that looks like a hashtag but with giberish like #ffea02  
replace MOVE with how much to move the text to the right like 5% or 12% probably best to keep it under 50%  
its % of the screen width so 50% starts like right in the middle  
mine is 20% if that helps

now just put this in a work skin or at the bottom of the one you already use. use it as many times as you want

if you wanna make the text look dumb you can look up css reference on google and add more in between the { }

then when you do writing you use <p class="NAME"> ... <p> for whole lines and <span class="NAME"> ... </span> for just little bits.

done

I think theres a few things you left out

like wat

Like the basic syntax. They will have no idea what any of this means.

they dont need to know to talk about us fucking which you know is all theyre gonna do

I still don't feel comfortable with that

I feel the same way, but its not like we have any power to stop them, considering that we only exist when people think about us

thats a shit attempt at a existential crisis and you know it

Well, its not like stuff like that is easy to come up with. There's a reason why your multimedia thing only lasted 2 weeks.

then why bother

You also didn't explain how to create or edit work skins.

its in the beginning notes of ch 2 and 3

On second thought, Juices explanation covers what most people will _need_ to get the job done, but 10, yours covers way more and provides context which is helpful for people who may have anxiety about code because it always seems so incomprehensible if you dont know anything about it.

Proper context was one of my main goals for this guide

i dont do goals but being fast was my main touchdowns

lol

*sigh*

Alright, was there anything else to cover.

AO3s Work Skin things.

Of course. So, when making your work skin, as described in the notes of chapters 2 and 3 of this fic, there are a few things you will need to keep in mind.

One; every CSS statement must begin with #workskin  including the space, otherwise the rule will be deleted. Its so you don't mess up the rest of the site if you get this wrong.

Two; AO3 allows readers to pick a site skin, which can change the background color. This could cause a conflict which would make the text unreadable if you use the same text color as their background so use #workskin { background: COLOR } with an appropriate color for your text colors. I recommend either #111111 or #EEEEEE. Pure black or white is too much contrast.

Three; the preview function is your friend.

.

Alright I think were good.

wait, was this live?

No, I'm copying our chat log into a document, and I'll go back and edit out the arguing and grammar mistakes later before I post it.

hwo dar u dats sensor ship

So its not just gonna be this conversation verbatim

Nah, that'd be dumb

**Notes for the Chapter:**

> If you need help with this stuff feel free to ask


End file.
